import React,{ useState, useMemo } from 'react'
// 如果我有两个数据，如果改动其中一个数据，是整个函数组件会重新渲染的
// useMemo 是用于函数组件性能优化的。用于记录某一个数据的变动，
// 只有整个数据改变了，它对应与操作的方法才会执行
import Hello from './components/Hello'

export default function LayOut() {
  const [count, setCount] = useState(0)
  const [list] = useState([1,2,3])
  function renderList() {
    console.log("renderList")
    return list.map((item, index) => <li key={index}>{item}</li> )
  }
  // 两个参数，只有但list改变时，才会执行 renderList函数
  const memoList = useMemo(() => renderList(), [list])  
  return (
    <div>
        LayOut
        <button onClick={() => {setCount(a => ++a)}}>+1</button>
        <div>{count}</div>
        <hr />
        list 列表的渲染
        <ul>
          {/* {renderList()} 然后 把 这个值拿到以后，在进行赋值 */}
          {memoList}  
        </ul>
        <Hello />
    </div>
  )
}
